<template>
  <div class="home">
    <!-- <h3>wangEditor with vue</h3> -->
    <div id="demo1"></div>
    <!-- <button type="button" class="btn" @click="getEditorData">获取当前内容</button> -->
    <!-- <h3>内容预览</h3>
    <textarea name="" id="" cols="170" rows="20" readonly v-model="editorData"></textarea> -->
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from 'wangeditor'
  import { uploadUrl } from '@/config'

export default {
  props:{
    value:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      editor: null,
      editorData: ''
    }
  },
  computed:{
     headers(){
            return {
                Authorization:this.$store.state.user.token||''
            }
        },
  },
  watch:{
    value: function(value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    }
  },
  mounted() {
   this.createEditor();
   if(this.editor){
    this.editor.txt.html(`${this.value}`);
   }
  },
  methods: {
    createEditor(){
      const editor = new wangEditor(`#demo1`);
      editor.config.menus = [
            "head", // 标题
            "bold", // 粗体
            "fontSize", // 字号
            "fontName", // 字体
            "italic", // 斜体
            "underline", // 下划线
            "strikeThrough", // 删除线
            "foreColor", // 文字颜色
            "backColor", // 背景颜色
            "link", // 插入链接
            "list", // 列表
            "justify", // 对齐方式
            "quote", // 引用
            "emoticon", // 表情
            "image", // 插入图片
            "table", // 表格
            // "video", // 插入视频
            "code", // 插入代码
            "undo", // 撤销
            "redo", // 重复
            "fullscreen" // 全屏
        ];
      editor.config.uploadImgServer = uploadUrl;
      editor.config.zIndex = 1;
      //  editor.config.uploadImgShowBase64 = true;
      editor.config.uploadImgHeaders = this.headers;
      editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
        // 配置 onchange 回调函数，将数据同步到 vue 中
        editor.config.onchange = (newHtml) => {
          //  this.editorData = newHtml
          this.$emit('editorChane',newHtml)
        }
        editor.config.uploadImgHooks = {
            // 上传图片之前
            before: function(xhr) {
                console.log(xhr)

                // 可阻止图片上传
                // return {
                //     prevent: true,
                //     msg: '需要提示给用户的错误信息'
                // }
            },
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
                console.log('success', xhr)
            },
            // 图片上传并返回了结果，但图片插入时出错了
            fail: function(xhr, editor, resData) {
                console.log('fail', resData)
            },
            // 上传图片出错，一般为 http 请求的错误
            error: function(xhr, editor, resData) {
                console.log('error', xhr, resData)
            },
            // 上传图片超时
            timeout: function(xhr) {
                console.log('timeout')
            },
            // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            customInsert: function(insertImgFn, result) {
                // result 即服务端返回的接口
                console.log('customInsert', result)
                if(result.status === 0){
                  insertImgFn(result.data.url)
                }
                // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            }
        }
        // 自定义图片上传
        // editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        // // resultFiles 是 input 中选中的文件列表
        // // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        // // console.log(resultFiles)

        // // 上传图片，返回结果，将图片插入到编辑器中
        //     // insertImgFn(imgUrl)
        // }
        // 创建编辑器
        editor.create()
        this.editor = editor
    },
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style lang="scss">
  .home {
    width: 100%;
    margin: auto;
    position: relative;
    .btn {
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px 10px;
      cursor: pointer;
    }
    h3 {
      margin: 30px 0 15px;
    }
  }
</style>